﻿//人员树组件
Vue.component('qdt-tree-component', {
    data: function () {
        return {
            filterText: '',
            empSelectModel: "全部",
        }
    },
    //model: {
    //    prop: 'filterText',
    //    event: 'change'
    //},
    props: {
        //empSelectModel: String,
        expandAll: {
            type: Boolean,
            default: false
        }, 
        //filterText: String,
        defaultChecked: Array,
        treeData: Array,
        defaultProps: Object,
        hideFilter: {
            type: Boolean,
            default: false
        }, //隐藏筛选框
        leafOnly: {
            default: true,
            type: Boolean,
            required: false
        }
    },
    methods: {
        handleNodeChange: function (node, isCheck, childChecks) {
            //console.log(this.$refs.employeeTree.getCurrentKey());
            //this.$emit('check-change', { node: node, isCheck: isCheck, childChecks: childChecks })
            var tree = this.$refs.tree;
            let vm = this;
            var ids = tree.getCheckedKeys();
            if (ids.indexOf("0") !== -1 || ids.length == 0) {
                this.empSelectModel = '全部';
            }
            else {
                vm.empSelectModel = "全部";
                var empArr = tree.getCheckedNodes(this.leafOnly);
                empArr.forEach(function (element) {
                    vm.empSelectModel += "," + element.label;
                });
                this.empSelectModel.trim(",");
                this.empSelectModel = this.empSelectModel.replace('全部,', '');
                this.empSelectModel = this.empSelectModel.replace('全部', '');
            }
        },
        filterNode: function (value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    template: ` <div>
        <el-input v-model="empSelectModel"
                  v-popover:popoverTree
                  placeholder="请选择人员"
                  suffix-icon="el-icon-caret-bottom">
        </el-input>
        <el-popover ref="popoverTree"
                    placement="bottom-start"
                    width="300"
                    visible-arrow="false"
                    trigger="click">
            <el-input placeholder="输入职员姓名"
                      v-model="filterText"
                      prefix-icon="el-icon-search"
                      v-show="!hideFilter">
            </el-input>
            <el-tree :data="treeData"
                     show-checkbox
                     :default-expand-all="expandAll"
                     node-key="id"
                     :default-checked-keys="defaultChecked"
                     ref="tree"
                     highlight-current
                     :props="defaultProps"
                     v-on:check-change="handleNodeChange"
                     v-bind:filter-node-method="filterNode"
                     style="min-height:150px; max-height:400px; overflow-y:auto;">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>
                        <i v-bind:class="data.icon" class="tree-icon"></i>
                        {{ node.label }}
                    </span>
                </span>
            </el-tree>
        </el-popover>
    </div>`
})
